<template>
  <view class="content">
    <up-sticky :offsetTop="0" :z-index="10">
      <view class="logo">AT招聘</view>
    </up-sticky>
    <!-- 搜索栏-->
    <view class="p-20">
      <up-input placeholder="前端开发工程师" class="search-input">
        <template #prefix>
          <view @click="chooseAddress" class="flex f-s-m" style="color: #9d9d9d">
            <up-icon name="map" color="#9d9d9d" class="mr-10"/>
            {{ state.address }}
          </view>
        </template>
        <template #suffix>
          <up-icon name="search" color="#9d9d9d" class="mr-10" size="25"/>
        </template>
      </up-input>
    </view>
    <!--  操作区-->
    <at-card>
      <view class="work-group">
        <view v-for="item of homeMemberBar" :key="item.name" class="work-item" @click="toPath(item.path)">
          <view :style="{background:item.color}" class="p-10 flex-c-center" style="border-radius: 10rpx">
            <image :src="item.icon" style="width: 50rpx;height: 50rpx;" mode="aspectFill"/>
          </view>
          <view class="text-center mt-10">{{ item.name }}</view>
        </view>
      </view>
    </at-card>
    <view class="mt-20">
      <up-notice-bar
          :text="state.notice"
          direction="column"
      ></up-notice-bar>
    </view>
    <!--推荐卡片-->
    <at-card>
      <view class="before-tag fw-600">名企推荐</view>
      <up-scroll-list>
        <view v-for="item in companyCardDataMock" :key="item.name" class="mb-20">
          <company-card :data="item"/>
        </view>
        <view class="flex-center px-20">
          <up-icon name="arrow-right"/>
        </view>
      </up-scroll-list>
    </at-card>
    <!-- 工作卡片 -->
    <view class="py-20">
      <up-sticky :offsetTop="0" :z-index="11" class="px-20" id="tabs" :style="{paddingTop: state.paddingTop}"
                 :bg-color="`rgba(253,119,83,${state.scrollTop})`">
        <up-tabs :list="state.tabs" @click="changeTabs" :current="state.active"></up-tabs>
      </up-sticky>
      <view v-for="item of workCardDataMock" :key="item.name">
        <work-card :data="item" :type="state.active"/>
      </view>
      <at-empty v-if="workCardDataMock.length === 0" :desc="'暂无数据'" type="empty"/>
    </view>
  </view>
  <at-tabbar/>
</template>

<script setup>
import {reactive} from "vue";
import {homeMemberBar} from "@/utils/config/options";
import CompanyCard from "@/work/components/company-card.vue";
import WorkCard from "@/work/components/work-card.vue";
import {companyCardDataMock, workCardDataMock} from "@/utils/mock";
import {onPageScroll} from '@dcloudio/uni-app'
import {toPath} from "@/utils/commonUtils";

const state = reactive({
  notice: ['欢迎来到AT招聘，这里有你想要的工作', '你可以找到自己喜欢的工作'],
  address: '地址选择',
  active: 0,
  scrollTop: 0,
  paddingTop: 0,
  tabs: [
    {
      name: '推荐',
      id: 0
    },
    {
      name: '附近',
      id: 1
    }
  ]
})


const chooseAddress = () => {
//  地址选择
}

const changeTabs = (e) => {
  state.active = e.index
}

onPageScroll((e) => {
  if (e.scrollTop > 600) {
    state.scrollTop = 1
    state.paddingTop = '88rpx'
  }
  if (e.scrollTop < 600) {
    state.scrollTop = e.scrollTop / 4000
    state.paddingTop = Math.floor(e.scrollTop / 5) + "rpx"
  }
})
</script>

<style scoped lang="scss">
.content {
  background: linear-gradient(to bottom, $theme-color 10%, #f5f5f5 100%) fixed;
  background-attachment: fixed;
  min-height: 100vh;
}

.logo {
  background: $theme-color;
  padding: 70rpx 20rpx 20rpx 20rpx;
  color: #fff;
  font-weight: 600;
}

.search-input {
  background: #eee;
  border-radius: 100rpx;
}

.work-group {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 30rpx;
  align-items: center;
  justify-content: center;

  .work-item {
    color: #333;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 24rpx;
    align-items: center;
  }
}
</style>
